<template>
    <div>
<!--//弹出框-->
      <el-dialog
        title="添加用户角色"
        :visible.sync="dialogVisible"
        width="45%">

<!--表格-->
        <el-form ref="form" :visible.sync="dialogVisible" :model="form" label-width="80px">

            <el-form-item label="登录昵称" prop="loginName" :rules="rules.loginName" >
                <el-input v-model="form.loginName" auto-complete="off" ></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName" :rules="rules.userName" >
                <el-input v-model="form.userName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email" :rules="rules.email" >
                <el-input v-model="form.email" auto-complete="off"></el-input>                 
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber" :rules="rules.phonenumber" >
                <el-input v-model.number="form.phonenumber" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="sex" >
                <el-radio-group v-model="form.sex">
                    <el-radio v-model="form.sex" label="0">男</el-radio>
                    <el-radio v-model="form.sex" label="1">女</el-radio>
                </el-radio-group> 
            </el-form-item>
          <el-form-item prop="deptId" label="部门">
            <el-select
              v-model="form.deptId"
              collapse-tags
              style="width: 340px;"
              placeholder="请选择">
              <el-option
                v-for="item in dept"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="帐号状态" prop="status" >
                       <el-radio-group v-model="form.status"> 
                            <el-radio v-model="form.status" label="0">正常</el-radio>
                            <el-radio v-model="form.status" label="1">停用</el-radio>
                        </el-radio-group>                  
         </el-form-item>
          <el-form-item label="密码" prop="password" :rules="rules.password">
              <el-input :placeholder="form.password" v-model="form.password" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repassword" :rules="rules.repassword">
              <el-input :placeholder="form.repassword" v-model="form.repassword" autocomplete="off" show-password></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">

          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tianjia">确 定</el-button>
        </span>
      </el-dialog>


    <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名称">
                <el-input v-model="formInline.userName" placeholder="用户名称"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formInline.phonenumber" placeholder="电话"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="clearc">清除</el-button>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
            </el-form>
            
    </el-row>
    <el-row>
        <el-table
        :data="tableData"
        style="width: 100%">
         <el-table-column
            prop="loginName"
            label="登录账号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户名称"
            width="180">
        </el-table-column>
         <el-table-column
            prop="email"
            label="用户邮箱"
            width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
          <template slot-scope="scope">
            <p  v-if="tableData[scope.$index].status==0">男</p>
            <p  v-if="tableData[scope.$index].status==1">女</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="部门">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <p  v-if="tableData[scope.$index].status==0">正常</p>
            <p  v-if="tableData[scope.$index].status==1">禁用</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="phonenumber"
            label="电话">
        </el-table-column>
        <el-table-column label="操作" width="270">
            <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                   @click="toShowRoles(scope.$index, scope.row)">赋予角色</el-button>
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                 <el-button
                     size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
         </el-table-column>
        </el-table>
     </el-row>
     <el-row>
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,3,5,10,20,100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
     </el-row>
    </div>
</template>
<script>
export default {
     data() {
       var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          //console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
            }
          }
        };
        var validatePass2 = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('确认密码不能为空'));
        }else {
          if(this.form.repassword==this.form.password){
            callback();
          }else {
          return callback(new Error('两次密码不相同'));
          }
        }
        };
        return {
          tableData: [],
          dialogVisible:false,
          currentPage:1,
          role: [],
          total:100,
          formInline: {userName:'',phonenumber:''},
          pageSize:5,
          dept: [],
          form: {
            loginName:'',
            userName:'',
            email:'',
            phonenumber:'',
            deptId:'',
            sex:'',
            status:'',
          },
          rules:{
                    loginName:[
                        {required: true, trigger: ["blur", "change"], message: "请输入登录昵称" },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }  
                    ],
                    userName:[
                        {required: true, trigger: ["blur", "change"], message: "请输入用户名" },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    email:[
                         {required: true, trigger: ["blur", "change"], message: "请输入邮箱地址" },
                         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                     ],
                    phonenumber:[
                         {validator: checkPhone, trigger: 'blur'},  
                     ],
                    userType:[
                        {required: true, message: '请选择用户类型', trigger: 'change' }
                     ],
                    sex:[
                        {required: true, message: '请选择用户性别', trigger: 'change' }
                    ],
                    status:[
                        {required: true, message: '请选择用户状态', trigger: 'change' }
                    ],
                    password:[
                        {required: true, trigger: ["blur", "change"], message: "请输入密码" },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }  
                    ],
                    repassword: [ 
                       {validator: validatePass2, trigger: 'blur'},   
                    ],
                   

                },
        }
      },
      // 初始化数据  mounted()
      created:function(){
              this.loadData();
              this.deptall(); 
            //   this.roleData();
      },
        methods: {
                //封装数据请求
                loadData(){
                    var _this=this;
                    this.$http.post("/ss/user/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize+"&userName="+this.formInline.userName+"&phonenumber="+this.formInline.phonenumber).then((response) => {
                    //console.log(JSON.stringify(response.data))
                    _this.tableData=response.data.t.list;
                    _this.total=response.data.t.total;
               })
                },
                // roleData(){
                //     var _this=this
                //     this.$http.post("/ss/role/queryAll?pageNo").then((response) => {
                //     alert(JSON.stringify(response.data))
                //     _this.role=response.data.t.list;
                //     })
                // },
                
                 //处理编辑
                handleEdit(index, row) {
                    this.form=JSON.parse(JSON.stringify(row))
                    alert(JSON.stringify(this.form))
                    this.dialogVisible=true;
                },
                //处理删除
                handleDelete(index, row) {
                    console.log(index, row);
                },
                  //点击新增的按钮 让他显示淡出狂并且form清空
                  handleAdd() {
                    this.dialogVisible=true;
                    //this.form={};
                  },
                //分页 每页数量变化时处理
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                },
                 //分页 第几页变化时处理
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                },
                //点击查询方法
                 onSubmit() {
                     this.loadData();
                },
                //添加方法
                tianjia(){
                    var _this = this;
                    this.$refs.form.validate(bool => {
                    if (bool) {
                         //alert(JSON.stringify(this.form))
                        this.$http.post("/ss/user/insert",this.form).then((response) => {
                        //console.log(JSON.stringify(response.data))
                        alert(JSON.stringify(response.data))
                        })
                     }
                    })
                },
                //查询所有部门
                deptall(){
                  var _this=this;
                    this.$http.post("/ss/dept/queryAllNoPage").then((response)=> {
                    //alert(JSON.stringify(response.data.t))
                    _this.dept=response.data.t;
                  })
                },
                //清除查询条件
                clearc(){
                        this.formInline.userName='';
                        this.formInline.phonenumber='';
                        this.loadData();
                        
                }
        }
}
</script>
<style>

</style>